<template>
  <div
    :id="widget.key"
		:data-type="widget.type"
    :class="'render-table-container'"
    :style="wrapStyle"
  >
    <table
      :class="['widget-table', { 'isBorder': widget.tableStyle.noBorder }]"
      :style="{ width: widget.tableStyle.width, position: 'relative' }"
      border="1"
      cellspacing="1"
      bordercolor="#dfdfdf"
    >
      <colgroup>
        <col v-for="(col, index) in widget.data[0]" :key="index" :width="col.style.width">
      </colgroup>
      <tr v-for="(row, index) in widget.data" :key="index" :style="{height:widget.tableStyle.trHeight}">
        <td v-for="(item, idx) in row" :key="idx"
          clsss="clearfix"
          :style="dealStyle(item, widget.tableStyle.noBorder)"
          :rowspan="item.rowspan"
          :colspan="item.colspan"
          :id="item.id ? item.id : ''"
        >
          <p v-if="item.value != ''" :style="item.textStyle" :key="item.key">{{ item.value }}</p>
          <template v-for="el in item.list">
            <render-form-item
              :key="el.key"
              :widget="el"
              parentType="table"
            />
          </template>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import ContainerMixin from '../mixins/container'

export default {
  name: 'RenderTable',
  mixins: [ContainerMixin],
  components: {
		RenderFormItem: () => import('./RenderForm/RenderFormItem.vue')
	},
  computed:{
    wrapStyle() {
      const { options } = this.widget
      const marginData = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight']
      let style = {}
      marginData.forEach(key => {
        const value = options[key]
        if (options[key]) {
          const hasUnit = value && /(px|%)/.test(value)
          style[key] = !value || hasUnit ? value : value + 'px'
        }
      })
      return style
    }
  },
  methods: {
    //处理高度设置，如果是合并的单元格则无法修改高度
    dealHeight(itm) {
      const isMergeRow = itm.rowspan && itm.rowspan > 1
      return isMergeRow ? 35 * itm.rowspan + 'px' : itm.style.height
    },

    //处理单元格样式
    dealStyle(itm, noborder) {
      const {
        width, display, background, borderTop,
        borderBottom, borderLeft, borderRight, borderWidth, borderStyle, borderColor,
        fontWeight, fontSize, fontFamily = '微软雅黑', underline = false, fontStyle = 'normal'
      } = itm.style;
      const height = this.dealHeight(itm);
      const border = noborder ? '' : `${borderWidth} ${borderStyle} ${borderColor}`;
      const styleData = {
        width,
        height,
        display,
        border,
        background,
        fontWeight,
        fontSize,
        fontFamily,
        fontStyle
      }
      styleData['text-decoration'] = underline ? 'underline' : 'none'
      if (!noborder && borderTop) styleData['borderTop'] = borderTop
      if (!noborder && borderBottom) styleData['borderBottom'] = borderBottom
      if (!noborder && borderLeft) styleData['borderLeft'] = borderLeft
      if (!noborder && borderRight) styleData['borderRight'] = borderRight
      return styleData;
    }
  }
};
</script>

<style lang="scss">
.render-table-container{
  position: relative;
}
.widget-table {
  width:100%;
  background: #fff;
  position: relative;
  border-collapse:collapse;
  table-layout:fixed;
  word-break:break-all;
  td {
    // 这行导致导航栏获取不到表格中的标题的offsetTop，会一直是0
    // position: relative;
    p {
      font-size: inherit;
      font-weight: inherit;
      padding: 0 15px;
      margin: 0;
    }
  }
  .sg-form-item {
    margin-bottom: 0!important;
  }
  .sg-radio-group {
    .sg-radio {
      float: left;
    }
  }
  // (51515) 未清楚该样式是做什么用，但该样式影响了表格里嵌套的子表样式
  // .sg-select {
  //   width: 100%!important;
  // }
  .sg-form-item-error-tip {
    z-index: 100;
  }
  .sg-date-picker {
    vertical-align: middle;
  }
  .sg-date-picker-rel {
    width: 100%;
  }
  .sg-date-editor {
    width: 100%!important;
    .sg-input__inner {
      height: 36px;
      line-height: 36px;
    }
  }
  /deep/.sg-input {
    border-radius:0;
  }
  /deep/.sg-select-selection {
    border-radius:0;
  }
  //表格中的单选框及复选框
  .item-image-box,.item-radio-box,.item-checkbox-box {
    padding-left: 15px;
  }
}
</style>

<style lang="scss" scoped>
  .isBorder {
    border: 0;
    tr {
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
    }
    td {
      border: 0;
    }
  }
</style>
